<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <svg id="svg" width="500" height="500" style="border: solid #000">
      <circle cx="300" cy="300" r="100" fill="red" />
    </svg>
    <hr />
    <svg id="svg" width="500" height="500" style="border: solid #000">
      <rect
        x="0"
        y="0"
        width="200"
        height="200"
        fill="none"
        stroke="#00f"
        stroke-width="2"
      />
      <rect
        x="200"
        y="200"
        width="200"
        height="200"
        fill="none"
        stroke="#0f0"
        stroke-width="2"
      />
      <circle cx="300" cy="300" r="100" fill="red" />
    </svg>
    <hr />
    <svg
      id="svg"
      width="200"
      height="200"
      viewBox="200 200 200 200"
      style="border: solid #000"
    >
      <circle cx="300" cy="300" r="100" fill="red" />
    </svg>
    <svg
      id="svg"
      width="500"
      height="500"
      viewBox="200 200 200 200"
      style="border: solid #000"
    >
      <circle cx="300" cy="300" r="100" fill="red" />
    </svg>
    <br />
    <svg></svg>
    <!-- <svg width="800" height="800" viewBox="50 50 100 100">
        <circle cx="100" cy="100" r="50" style="fill:red"/>
        <circle cx="500" cy="500" r="100" style="fill:blue"/>
    </svg>
    <hr>
    <svg viewBox="0 0 100 100" style="border:solid #000;"></svg> -->
  </body>
</html>
